<template>
	<u-popup :show="show" mode="bottom" :closeable="true" close-icon-size="25">
		<view v-if="state==2">
			<view class="fjs p6">
				<image class="w14 h14 br2 tsn" @click="preview(view.thumb)" :src="filter.image(view.thumb)" />
				<view class="fdc h14 pl2">
					<view class="fs30 fwb w50 tl2">【{{view.country_name}}】{{view.name}} {{view.spec}}</view>
					<view class="fc-green pl3 fs32 twb"><text class="fs20">￥</text>{{view.price / 100}}</view>
				</view>
			</view>
			<view v-for="(spec, i) in specsList" :key="i">
				<view class="px6 pb4 twb">{{spec.name}}</view>
				<view class="px6 fww fjs">
					<view class="p3 mr4 mb4" v-for="(opt, j) in spec.opts" :key="j" :class="['tag-primary', 'tag-light', 'tag-light c11'][type(i, opt.id)]" @click="choose(i, opt.id)">
						{{opt.name}}
					</view>
				</view>
			</view>
			<view class="fjb px6 py8 u-border-top">
				<text>购买数量:</text>
				<u-number-box v-model:value="formData.number" :min="1" :max="view.stock*1" />
			</view>
			<view class="fjb tac">
				<view class="f1 bg-warning py6" @click="buy(view.id, view.number, false)">加入购物车</view>
				<view class="f1 bg-primary py6" @click="buy(view.id, view.number, true)">立即购买</view>
			</view>
		</view>
		<view v-else-if="state==1" class="fjc py6 h40">
			<Loading />
		</view>
	</u-popup>
</template>
<script lang="ts">
import util from '@/utils/util'
import filter from '@/utils/filter'
import {page} from '@/mixins'
import {mapState} from "pinia"

export default {
	mixins: [page],
	props: {
		value: {
			type: [String, Number],
			default: 1
		}
	},
	data(){
		return {
			filter: filter,
			view: { id: 0, price: 0, presell: 0, thumb: '', spec: '', item_id: 0, number: 1, soids: [] },
			items: [],
			state: 0,
			specsList: []
		}
	},
	computed: {
		show: {
			get(){
				if(this.auth && this.value>0){
					this.cart(this.value)
					return true
				} else if(!this.auth && this.value>0) {
					uni.$store.main.update({showAuth: true})
				}
				this.$emit('update:value', 0)
				return false
			},
			set(value){
				!value && this.$emit('update:value', 0)
			}
		}
	},
	methods: {
		cart(id) {
			this.state = 1
			uni.$u.http.get('item/specs/' + id).then(res => {
				this.state = 2
				this.view = res.view
				this.specsList = res.specsList
				res.items.map(r=>{
					this.items[r.soids.join('-')] = r
				})
			}).catch(e=>{})
		},
		// 选择规格
		choose(i, oid) {
			if(this.type(i, oid) == 1){
				this.view.soids[i] = oid
				const item = this.items[this.view.soids.join('-')]
				Object.assign(this.view, util.pick(item, ['item_id', 'price','thumb','stock','spec','code', 'state']))
			}
		},
		type(m, oid){
			if(oid == this.view.soids[m]){
				return 0
			}
			const key = this.view.soids.map((r,i)=> m==i ? oid : r).join('-')
			return this.items[key] ? 1 : 2
		},
		// 直接购买
		buy(id, number = 1, direct=false) {
			if(direct) {
				uni.$u.http.post('direct/add', {
					item_id: this.view.item_id,
					price: this.view.price,
					number: this.view.number || 1,
					city_id: this.view.city_id,
					presell: this.view.presell,
					state: this.view.state
				}).then(res => {
					util.navto('direct/checkout')
				}).catch(e => {})
			} else {
				uni.$u.http.post('cart/add', {
					item_id: this.view.item_id, 
					price: this.view.price, 
					number: this.view.number || 1,
					city_id: this.view.city_id,
					presell: this.view.presell,
					state: this.view.state
				}).then(res=>{
					util.msg('添加成功', 'success')
					this.$store.user.updateCart(res)
					this.show = false
				}).catch(e=>{})
			}
		}
	}
}
</script>